<template>
  <el-form-item>
    <el-checkbox v-model="checked">{{title}}</el-checkbox>
    <span
      v-show="checked"
      style="padding-left:1em"
    >
      <el-date-picker
        v-if="!isLimited&&dataType=='DATE'"
        v-model="value"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
      <el-input-number
        v-if="!isLimited&&dataType=='NUMBER'"
        v-model="value"
      ></el-input-number>
      <el-input
        v-if="!isLimited&&dataType=='TEXT'"
        v-model="value"
      ></el-input>
      <el-select
        v-if="isLimited"
        v-model="value"
        placeholder="请选择"
      >
        <el-option
          v-for="(item , i) in dataOptions"
          :key="i"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </span>
  </el-form-item>
</template>

<script>
  export default {
    name: "inputForm",
    props: ["title", "index"],
    data() {
      return {
        checked: false,
        value: ""
      };
    },
    computed: {
      configList() {
        return this.$store.state.dataConfig;
      },
      dataID() {
        return this.getDataID(this.title);
      },
      dataConfig() {
        return this.configList[this.dataID];
      },
      dataType() {
        return this.dataConfig.type;
      },
      isLimited() {
        return this.dataConfig.is_limited;
      },
      dataOptions() {
        return this.dataConfig.options;
      }
    },
    methods: {
      getDataID(val) {
        for (let i = 0; i < this.configList.length; i++) {
          if (this.configList[i].title == val) {
            return i;
          }
        }
      },
      setValue() {
        this.$emit("set", {
          index: this.index,
          enable: this.checked && this.value != "",
          title: this.title,
          value: this.value
        });
      }
    },
    watch: {
      value() {
        this.setValue();
      },
      checked() {
        if (!this.check) this.value = "";
      }
    }
  };
</script>

<style scoped>
  .textbox {
    height: 2.5em;
  }

  td {
    padding: 0.25em 1em;
    line-height: 2.5em;
  }
</style>